import React, { useState } from 'react'
import styled from 'styled-components'

const Background = styled.div`
  background: #EDECEE;
  width: 100wh;
`

const HeadTool = styled.div`
  position: fixed;
  background: #252525;
  width: 100%;
  height: 64px;
  color: #676767;
  display: flex;
  justify-content: center;
  align-items: center;

`

const BlogContainer = styled.div`
  background: white;
  width: 60%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
  padding-top: 80px;
  overflow-y: scroll;
`

const Link = styled.a`
  color: #B1B1B1;
`

const MockTweetItems = [
  
  {
    "id": 2334,
    "author": "coco",
    "body": "相同的名字，截然不同的命运。有人变得幸运，就会有其他人变得不幸。想要让每个人都变得幸运的祈愿，最终能否实现？",
    "photos": [
      "https://picsum.photos/seed/h21/420/300",
      "https://picsum.photos/seed/h22/200/300",
      "https://picsum.photos/seed/h23/200/300"
    ],
    "commentCount": 2
  },
  {
    "id": 54,
    "author": "rachael",
    "body": "相同的名字，截然不同的命运。有人变得幸运，就会有其他人变得不幸。想要让每个人都变得幸运的祈愿，最终能否实现？",
    "photos": [
      "https://picsum.photos/seed/h31/420/300",
      "https://picsum.photos/seed/h32/200/180",
      "https://picsum.photos/seed/h33/200/300"
    ],
    "commentCount": 0
  },
  {
    "id": 42,
    "author": "helapu",
    "body": "大舅是中路最常用的式神，也是我最喜欢的式神, 第一次COS有一些小磕碰，化妆的时候眼睛睁不开，拍照的时候姿势不会摆哈哈，有点囧，但是很开心。",
    "photos": [
      "https://picsum.photos/seed/h11/420/300",
      "https://picsum.photos/seed/h12/300/200",
      "https://picsum.photos/seed/h13/200/300",
      "https://picsum.photos/seed/h14/240/300"

    ],
    "commentCount": 0
  },
  {
    "id": 46,
    "author": "helapu",
    "body": "大舅是中路最常用的式神，也是我最喜欢的式神, 第一次COS有一些小磕碰，化妆的时候眼睛睁不开，拍照的时候姿势不会摆哈哈，有点囧，但是很开心。",
    "photos": [
      "https://picsum.photos/seed/h11/420/300",
      "https://picsum.photos/seed/h12/300/200",
      "https://picsum.photos/seed/h13/200/300",
      "https://picsum.photos/seed/h14/240/300"

    ],
    "commentCount": 0
  }
]

const MockTweetCommentItems = {
  "2334": {
    "id": 2334,
    "comments": [
      {
        "author": "Alice",
        "commentAt": "2021-01-01 14:01:48",
        "body": "nice 拍的不错"
      },
      {
        "author": "Ince",
        "commentAt": "2021-01-04 11:02:48",
        "body": "回忆是毒药"
      }
    ]
  }
}


export default function Blog(props) {

  const [blurry, setBlurry] = useState('')

  const [tweetItems, _setTweetItems] = useState(MockTweetItems)

  function handleSearch(event) {
    setBlurry(event.target.value)
  }

  function handleKeyDown(event) {
    if(event.keyCode === 13) {
      alert(blurry)
    }
  }
  return (

    <Background>

      <HeadTool>

        <div className="flex justify-center items-center w-24 text-gray-200 mr-6 backdrop-filter backdrop-blur-lg">
          <img className="block w-12 h-12 rounded-full" src="https://picsum.photos/128/128/?blur=1" alt="logo"></img>
          <p className="my-auto text-2xl ml-1">react1</p>
        </div>
        
        <div className="w-24 text-gray-200 text-center text-xl"><a href="http://helapu.com">首页</a></div>
        <div className="w-24 text-gray-200 text-center text-xl"><a href="http://helapu.com">发现</a></div>

        <div className="w-48 mx-6 text-gray-200 text-center text-xl bg-white rounded-xl">
          <form className="w-full h-full">
            <div className="rounded-3xl bg-red-100 mx-4">
              <input value={blurry} onChange={handleSearch} onKeyDown={handleKeyDown} className="w-full h-full border-0 outline-none text-gray-400 text-right" placeholder="用户、标签" />
            </div>
          </form>
        </div>

        <div className="w-24 text-gray-200 text-center text-xl"><a href="http://helapu.com">消息</a></div>
        <div className="w-24 text-gray-200 text-center text-xl"><a href="http://helapu.com">设置</a></div>
        <div className="w-24 text-gray-200 text-center text-xl"><a href="/login">登录</a></div>
    
      </HeadTool>

      <BlogContainer>


        {

          tweetItems.map((tweet) =>

            <div className="self-start" key={tweet.id.toString}>
              <div className="flex justify-start items-start mb-12">
                <div className="flex flex-col justify-start align-center w-24">
                  <p className="block text-start">{tweet.author}</p>
                  <img className="block w-16 h-16 rounded-full" src={`https://picsum.photos/seed/${tweet.author}/200/300`} alt="avatar" />
                </div>
                <div className="mx-8 w-full">

                  <ul className="block flex flex-wrap">
                    {
                      tweet.photos.map( (photo) => 
                        <li className="inline-block">
                          <img src={photo} alt="a info" />
                        </li>
                      )
                    }
                  </ul>
                  <p className="block text-xl">{tweet.body}</p>

                  <div className="flex justify-between w-full my-2">
                    <div>
                      <Link className="mx-1">tag1</Link>
                      <Link className="mx-1">tag2</Link>
                    </div>
                    <div className="mr-2">
                      <Link href="http://helapu.com" className="mx-1">热度(423)</Link>
                      <Link className="mx-1">评论({tweet.commentCount})</Link>
                      <Link className="mx-1">分享</Link>
                      <Link className="mx-1">推荐</Link>
                    </div>
                  </div>

                  <div className="flex flex-col justify-start w-full">
                    {
                      
                    }
                  </div>

                </div>

              </div>
              

              
              
            </div>
          
          )
          
        }


      </BlogContainer>
    </Background>

  )

}